<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-16 15:01:18
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-11 17:32:06
-->
<template>
  <ActionTable @addRow="showModal('ADD', { isShow: 0, menuId, detail: '' })" />
  <a-table
    :columns="columns"
    :row-key="(record) => record.id"
    :data-source="state.menuItemOfData"
    :pagination="state.pagination"
    :loading="state.loading"
    @change="handleTableChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'isShow'">
        <a-switch
          :checked="record.isShow === 1"
          checked-children="开启"
          un-checked-children="关闭"
          @click="toggleMenuItemState(record)"
        />
      </template>
      <template v-if="column.key === 'action'">
        <TableRowAction
          :showSelect="false"
          :showDel="false"
          @updateItem="showModal('UPDATE', record)"
        >
          <a-button type="primary" @click="showPackage(record)">项目</a-button>
        </TableRowAction>
      </template>
    </template>
  </a-table>
  <contextHolder />
</template>
<script lang="ts" setup>
import {
  insertTicketMenuItem,
  selectByExample,
  updateTicketMenuItem,
} from "@/api/ticket/menuItem";
import { TableProps, Modal, message as $message } from "ant-design-vue";
import { h, onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { router } from "@/router";
import MenuItemForm from "./menu-item-form.vue";
import { modalTitleEnum } from "@/enums/modalEnum";
import { paginationToQuery } from "@/utils/common";
const route = useRoute();
const [modal, contextHolder] = Modal.useModal();
const childRef = ref();
const columns = [
  {
    dataIndex: "id",
    title: "ID",
    key: "id",
    align: "center",
  },
  {
    dataIndex: "menuId",
    title: "归属ID",
    key: "menuId",
    align: "center",
  },
  {
    dataIndex: "itemName",
    title: "类别名称",
    key: "itemName",
    align: "center",
  },
  {
    dataIndex: "orderNumber",
    title: "排序",
    key: "orderNumber",
    align: "center",
  },
  {
    dataIndex: "isShow",
    title: "状态",
    key: "isShow",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
  },
];
const menuId = ref();
const state = reactive({
  loading: true,
  menuItemOfData: <API.TicketMenuItem>[],
  pagination: {
    pageSize: 10,
    current: 1,
    total: 0,
  },
});

const loadData = async () => {
  const { seachList, seachTotal } = await selectByExample(
    { menuId: menuId.value },
    paginationToQuery(state.pagination)
  );
  state.menuItemOfData = seachList;
  state.pagination.total = seachTotal;
  state.loading = false;
};

const handleTableChange: TableProps["onChange"] = (page) => {
  state.pagination.current = page.current!;
  loadData();
};

/**
 * 查看项目列表
 * @param menuItem
 */
const showPackage = (menuItem) => {
  router.push({
    name: "ticket-package",
    params: { menuId: menuId.value, menuItemId: menuItem.id },
  });
};

/**
 * 切换类别显示状态
 * @param menuItem
 */
const toggleMenuItemState = async (menuItem) => {
  const { id, isShow } = menuItem;
  await updateTicketMenuItem({ id, isShow: !isShow });
  loadData();
};

const showModal = (type: string, data?: any) => {
  const menuForm = () => h(MenuItemForm, { ref: childRef, formData: data });
  modal.confirm({
    title: modalTitleEnum[type] + "类别",
    width: 1000,
    icon: null,
    content: menuForm,
    okText: "提交",
    cancelText: "取消",
    async onOk() {
      const {
        id,
        menuId,
        itemName,
        isShow,
        detail,
        orderNumber,
      } = childRef.value.getAllValue();
      if (type === "ADD") {
        const { msg } = await insertTicketMenuItem({
          itemName,
          isShow,
          menuId,
          detail,
          orderNumber,
        });
        msg === "success" ? loadData() : $message.error(msg);
      } else if (type === "UPDATE") {
        const { msg } = await updateTicketMenuItem({
          id,
          itemName,
          isShow,
          menuId,
          detail,
          orderNumber,
        });
        msg === "success" ? loadData() : $message.error(msg);
      }
    },
    onCancel() {
      Modal.destroyAll();
    },
  });
};

onMounted(() => {
  menuId.value = route.params.menuId;
  loadData();
});
</script>
<style lang="less" scoped>
.action-table {
  margin-bottom: 20px;
}

.action-row {
  button {
    margin-left: 10px;

    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
